// 1 导入路由
import { createRouter, createWebHashHistory } from 'vue-router'

// 2 引入组件
import Home from '@/views/home/home.vue'
import Login from '@/views/login/login.vue'

// 3 配置路由规则
let routes = [
    {
        path: '/', component: Home, name: 'layout'
    },
    {
        path: '/home', component: Home, name: 'layout',
    },
    {
        path: '/login', component: Login, name: 'login'
    }
]
// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
const router = createRouter({
    history: createWebHashHistory(),
    routes  // `routes: routes` 的缩写
})

//  导航 守卫  实现路由拦截
// 注册一个全局守卫,作用是在路由跳转前,对路由进行判断,防止未登录的用户跳转到其他需要登录的页面去
router.beforeEach((to, from, next) => {
    let data = JSON.parse(window.localStorage.getItem('vuex') || '[]')
    console.log(data.token)

    // 如果已经登录，放行
    if (data && data.token) {
        next()

    } else {
        // 如果没有登录，访问非登录页面,则跳转到登录页面

        if (to.path != '/login') {

            next('/login')
        } else {
            // 如果没有登录，但访问的是登录页面,直接进入
            next()
        }

    }

})

// 5  导出路由实例
export default router